<template>
  <div>
    <div class="comment_input">
      <textarea
        @blur="comment_blur"
        @focus="comment_focus "
        v-model="input_value"
        :class="{
          high_textarea:is_high_textarea
      }"
      ></textarea>
      <div class="foot_buttons">
        <p class="hint">输入内容 为您识别</p>
        <p>
          <span class="iconfont icon-jiagouwuche"></span>
          <span class="iconfont icon-follow"></span>
        </p>
        <button @click="input_click">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input_value: "",
      is_high_textarea: false
    };
  },
  methods: {
    input_click() {
      this.$emit("input_click", this.input_value);
       this.input_value = ''
    },
    comment_blur() {
      this.is_high_textarea = false;
      console.log("失去");
      setTimeout(() => {
        this.$emit("comment_blur");
      }, 300);
    },
    comment_focus() {
      this.is_high_textarea = true;

      console.log("获取");
    }
  },
  props: ["focus"],
  watch: {
    focus() {
      this.is_high_textarea = true;
    }
  }
};
</script>

<style lang="less" scoped>
.comment_input {
  width: 100%;
  background: white;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  textarea {
    width: 100%;
    height: 16.667vw;
    border: 0;
    outline: none;
    resize: none;
    border: 2px dashed #ccc;
  }
  .high_textarea {
    border: 2px dashed #31c37b;
  }
  .foot_buttons {
    padding: 1.389vw 0;
    height: 8.333vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      font-size: 3.889vw;
      span {
        padding: 0 2.778vw;
        font-size: 5.556vw;
      }
      .icon-jiagouwuche {
        color: violet;
        font-weight: 700;
      }
      .icon-follow {
        color: red;
      }
    }
    button {
      font-weight: 700;
      color: #31c37b;
      padding: 0.556vw;
      border-radius: 2.778vw;
      border: 2px dashed #31c37b;
      background: transparent;
    }
  }
}
</style>